import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css'
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

function Header(){
return <>
    <div className="head">
      <span>&lt;</span>
      <span>Time Machine</span>
    </div>
    <div className="subtitle">
      <span>Crooked Doors</span>
    </div>
</>
}

const Content = () =>{
  return <main> 
    <div className="pic">
      <img src="https://img.shetu66.com/2023/04/25/1682391068745168.png" alt="" />
    </div>
  </main>
}

function BoFang(){
return <>
 <div className="jindutiao">
    <div className="line"></div>
    <div className="blackline"></div>
 </div>
 <div className="time">
  <span>00:43</span>
  <span>04:20</span>
 </div>
</>
}

const Annius = () =>{
  return <>
    <div className="ani">
      <img src="https://img.ixintu.com/download/jpg/20200802/37c72515528f586e7316feb7dc8920c9_512_512.jpg!ys" alt="" />
      <img src="https://pic.616pic.com/ys_img/00/04/56/pGXOm8OI0T.jpg" alt="" />
      <img src="https://img.tukuppt.com/png_preview/00/57/93/bsNeGd1bbm.jpg!/fw/780" alt="" />
    </div>
  </>

}

function Footer(){
  return<>
  <div className="footer">
    <img src="/0701homework/circle.png" alt="" />
    <img src="/0701homework/rand.png" alt="" />
    <img src="/0701homework/add.png" alt="" />
    <img src="/0701homework/like.png" alt="" />
 </div> 
  </>
}
class App extends React.Component {
  // 类组件中必须要有一个 render, render 是渲染函数和 ets 中的builder
  render() {
    return <>
    <div className="whole">
      <Header></Header>
      <Content />
      <BoFang></BoFang>
      <Annius />
      <Footer />
    </div>
    

    </>
  }
}

root.render(
  <App />
  
);

